<template>
  <div class="article-list">
      <!-- //success-text 成功提示文本 -->
     <!-- success-duration 成功提示持续时间 -->
    <van-pull-refresh
      v-model="isrefreshLoading"
      @refresh="onRefresh"
      :success-text="refreshSuccessText"
      success-duration="1000"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
      >
       <article-item 
       v-for="(article,index) in list" 
       :key="index"
       :article = "article" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from "@/api/article";
import ArticleItem from './article-item'
export default {
  name: "article-list",
  components:{
    ArticleItem
  },
  props: {
    channel: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      list: [], //存储列表数据
      loading: false, //控制加载中loading状态
      finished: false, //控制数据加载结束的状态
      timestamp: null, // 请求获取下一页数据的时间戳
      error: false, // 控制列表加载失败的提示状态
      isrefreshLoading: false, // 控制下拉刷新的状态
      refreshSuccessText: "刷新成功",
    };
  },
  created() {},
  computed: {},
  methods: {
    async onLoad() {
      try {
        // 请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id,
          //请求第一页数据 当前最新时间戳
          timestamp: this.timestamp || Date.now(),
          with_top: 1,
        });

        // 模拟随即失败的情况
        // if(Math.random()>0.5) {
        //     JSON.parse('dsffsdfs')
        // }

        // 把请求结果放到list数组中
        const { results } = data.data;
        //数组展开运算符操作 它会把数组元素一个一个拿出来
        this.list.push(...results);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (results.length) {
          // 更新获取下一页数据的时间戳
          this.timestamp = data.data.pre_timestamp;
        } else {
          //没有数据了
          this.finished = true;
        }
      } catch (err) {
        this.error = true;
        this.loading = false;
      }
    },

    //下拉刷新触发该函数
    async onRefresh() {
      try {
        //请求获取数据
        const { data } = await getArticles({
          channel_id: this.channel.id,
          //请求第一页数据 当前最新时间戳
          timestamp: Date.now(), //传递当前最新时间戳
          with_top: 1,
        });

        // 模拟随即失败的情况
        // if(Math.random()>0.5) {
        //     JSON.parse('dsffsdfs')
        // }

        // 把数据追加到列表顶部
        const { results } = data.data;
        this.list.unshift(...results);
        //关闭下拉刷新的loading状态
        this.isrefreshLoading = false;
        // 更新下拉刷新成功提示文本
        this.refreshSuccessText = `刷新成功,更新了${results.length}条数据`;
      } catch (err) {
        this.isrefreshLoading = false;
        this.refreshSuccessText = "刷新失败";
      }
    },

    //  onLoad() {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1);
    //     }

    //     // 加载状态结束
    //     this.loading = false;

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    // },
  },
};
</script>

<style lang='less' scoped>
.article-list {
  // 百分比单位是相当对于父元素的
  // height: 100%;
  height: 79vh;
  overflow-y: auto;
}
</style>